<template>
  <div>
    <!-- 头部 -->
    <hm-header>登录</hm-header>
    <!-- logo -->
    <hm-logo></hm-logo>

    <!-- 文本框部分 -->
    <!-- 
      1+(3个)
      1+(4个)
      1+(10个)
      age='40'
      :age='40'
    -->
    <hm-input
      ref="username"
      message="用户名格式不合格"
      :rule="/^1\d{3,10}$/"
      v-model="username"
      type="text"
      placeholder="请输入用户名"
    ></hm-input>
    <hm-input
      ref="password"
      message="密码格式不合格"
      :rule="/^\d{3,6}$/"
      v-model="password"
      type="password"
      placeholder="请输入密码"
    ></hm-input>

    <!-- 登录按钮 -->
    <hm-button @click="login">登录</hm-button>
    <div class="link">
      没有账号?去
      <router-link class="a" to="/register">注册</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "10086",
      password: "123",
      checked: true
    };
  },
  created() {
    console.log("登录的", this.$route.params);

    // const { username, password } = this.$route.params;

    this.username = this.$route.params.username;
    this.password = this.$route.params.password;
  },
  methods: {
    login() {
      // 需求:
      // 拿到 hm-input 组件里面的一个校验的方法,进行校验, 并且拿到校验的结果, 好去判断
      let isOk1 = this.$refs.username.validate(this.username);
      let isOk2 = this.$refs.password.validate(this.password);

      if (!isOk1 || !isOk2) return;

      // 格式 axios.post(url,data,config)
      this.$axios
        .post("/login", {
          username: this.username,
          password: this.password
        })
        .then(res => {
          console.log("登录结果", res);
          if (res.data.statusCode === 200) {
            // alert('登录成功')
            this.$toast.success("登录成功");
            this.$router.push("/user");
          } else {
            this.$toast.fail("登录失败");
            // alert('登录失败')
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.link {
  text-align: right;
  margin-top: 20px;
  margin-right: 20px;
  font-size: 14px;
  .a {
    color: green;
  }
}
</style>
